<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'完工详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem"  v-if="this.index === 1">
            <p class="analyItemTit tx-center">武汉华科</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">利润率</span>
                    <span data-title="武汉华科永信建筑">26.39</span>
                </p>
            </div>
        </div>
        <div class="analyItem"  v-if="this.index === 2">
            <p class="analyItemTit tx-center">武汉华科</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">名称</span>
                    <span data-title="武汉华科永信建筑">武汉华科永信建筑</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">合同工期</span>
                    <span>45-7</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">开工日期</span>
                    <span>2019-03-05</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">经理/监理</span>
                    <span>张雄</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">延期天数</span>
                    <span>0</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">超期天数</span>
                    <span>0</span>
                </p>
            </div>
        </div>
         <div class="analyItem"  v-if="this.index === 3">
            <p class="analyItemTit tx-center">武汉华科</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">名称</span>
                    <span data-title="武汉华科永信建筑">武汉华科永信建筑</span>
                </p>
                <p class="col-md-6">
                    <span class="cLightGray pr8">期数</span>
                    <span>3</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">应回</span>
                    <span>178000</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">已回</span>
                    <span>17000</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">差额</span>
                    <span>0</span>
                </p>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
          <div class="analyItem" v-if="index === 1">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="clearfix">
                    <p class="col-md-3">
                        <span class="cLightGray pr8">总数</span>
                        <span>1</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="analyItem" v-if="index === 2">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="clearfix">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">在施</span>
                        <span>27</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">延期</span>
                        <span> 14</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">延期率</span>
                        <span> 51.85%</span>
                    </p>
                </div>
                <div class="clearfix">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">超期</span>
                        <span>6</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">超期率</span>
                        <span>22.22%</span>
                    </p>
                </div>
            </div>
        </div>
         <div class="analyItem" v-if="index === 3">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <div class="clearfix">
                    <p class="col-md-4">
                        <span class="cLightGray pr8">应回</span>
                        <span>2471565656</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">已回</span>
                        <span> 16546565161616</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">差额</span>
                        <span> 1656626565</span>
                    </p>
                    <p class="col-md-4">
                        <span class="cLightGray pr8">回款率</span>
                        <span> 50%</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
    data () {
        return {
            index: ''
        }
    },
    created () {
        this.index = Number(this.$route.query.index)
    },
    methods: {

    },
    watch: {
        $route () {
            this.index = Number(this.$route.query.index)
        }
    }
}
</script>
